<template>
	<view class="u-rela">
		<view class="page-top">
			<image src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lx-1.png" mode="widthFix">
			</image>
			<div class="text-wrap">
				<view class="text-1">特色路线</view>
				<!-- <view class="text-2">古老鲜活的文化历史，传承千年，滋养当下</view> -->
			</div>
		</view>
		<view class="page-wrap">
			<!-- tab切换 -->
			<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
				bar-height="14" :bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
				:active-item-style="{zIndex:1}" :list="list" :is-scroll="true" :current="current" @change="change">
			</u-tabs>
			<view class="line"></view>
			<div class="u-font-34 blod u-m-t-40">为您推荐</div>
			<navigator class="u-m-t-40 u-flex lx-item" :url="`/pages/route/detail?id=${item.id}`"
				v-for="item in childList" :key="item.id">
				<image class="img-lv"
					:src="item.thumbnail == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lv-2.png' : item.thumbnail"
					mode="widthFix">
				</image>
				<view class="u-m-l-30 u-flex-1">
					<view class="u-font-32 blod">{{ item.title }}</view>
					<view class="desc u-line-2 u-m-t-30">
						{{ item.description }}
					</view>
				</view>
			</navigator>
			<!-- <navigator class="u-m-t-40 u-flex lx-item" url="/pages/route/detail">
				<image class="img-lv"
					src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lv-2.png" mode="widthFix">
				</image>
				<view class="u-m-l-30 u-flex-1">
					<view class="u-font-32 blod">爱国主义教育旅游线路</view>
					<view class="desc u-line-2 u-m-t-30">
						旅游路线是指旅游服务机构为旅游者设计
						的旅游活动路线。它是联系旅游主体。它是联系旅游主体..
					</view>
				</view>
			</navigator> -->
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				list: [
					// 	{
					// 	name: 'A级路线'
					// }, {
					// 	name: 'B级路线'
					// }, {
					// 	name: 'C级路线'
					// },
				],
				current: 0,
				content1: `南京夫子庙附近是南京市秦淮河畔，这里的环境优美，
夜晚的夫子庙更是灯火辉煌，给人一种别样的美感。夜
晚来到夫子庙，可以欣赏到美丽的灯光秀，还可以品尝
到特色的夜市小吃。`,
				// shadowStyle: {
				// 	backgroundImage: "none",
				// 	paddingTop: "0",
				// 	marginTop: "20rpx"
				// }

				childList: []
			}
		},
		onLoad() {
			// 分类
			this.get_category_index()
		},
		onPullDownRefresh(){
			// 分类
			this.get_category_index()
		},
		methods: {
			change(index) {
				this.current = index;

				// 分类
				this.get_category_index()
			},

			// 分类
			get_category_index() {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.category_index,
					method: 'GET',
					data: {
						type: '特色路线'
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.list = res.data
						this.childList = []
						this.get_travel_featureList(this.list[this.current].category_id)
					}
				})
			},

			// 特色路线列表
			get_travel_featureList(category_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.travel_featureList,
					method: 'GET',
					data: {
						category_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.data.list.length == 0) return uni.showToast({
							icon: 'error',
							title: '暂无',
							duration: 2000
						})
						this.childList = res.data.list
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page-top {
		position: relative;
		width: 750rpx;
		height: 480rpx;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
		}

		.text-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.text-1 {
				font-size: 60rpx;
				font-family: AlimamaDongFangDaKai;
				font-weight: 400;
				color: #FFFFFF;
			}

			.text-2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		padding-top: 10rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;

		.line {
			width: 750rpx;
			height: 1px;
			background: #EEEEEE;
			margin-left: -30rpx;
		}





	}

	.lx-item {
		padding-bottom: 40rpx;
		border-bottom: 1px solid #E6E6E6;

		.img-lv {
			width: 230rpx;
			height: 136rpx;
			border-radius: 20rpx;
		}
	}

	.desc {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.img-wrap {
		width: 690rpx;
		height: 380rpx;
		margin-top: 35rpx;
		margin-bottom: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.btn-view {
		width: 190rpx;
		height: 66rpx;
		background: #07C160;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}

	// .read-more {
	// 	/deep/ .u-content__showmore-wrap {
	// 		justify-content: flex-start;
	// 		width: 160rpx;
	// 		height: 66rpx;
	// 		background: #F7FEFC;
	// 		border: 1px solid #07C160;
	// 		border-radius: 33rpx;
	// 		padding-bottom: 0;
	// 		text-align: center;
	// 		padding-left: 38rpx;

	// 		text {
	// 			font-size: 28rpx !important;
	// 			color: #07C160 !important;
	// 		}
	// 	}

	// }
</style>
<style>
	page {
		padding: 0;
	}
</style>